<template>
<div>
        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" :column="tableColumn" :data="tableData"  :pagination="pagination" :showComSearch="true" :tableButtons="buttons">
            <template v-slot:tableSearch>
                <el-input style="width: 240px" placeholder="Please input" v-model="name" />
            </template>

            <template v-slot:slotDate="scope">
                <el-input style="width: 240px" placeholder="Please input" v-model="scope.data.row.date" />
            </template>
        </Table>
    </div>
</template>



<script setup lang="ts">
import { ref, reactive } from 'vue'
import Table from '/@/components/tableNew/index.vue'
defineOptions({
    name: 'rule/rule',
})

var name = ref("123");
var date = ref("123");

var tableColumn = reactive<TableColumn[]>([
{
    label:"Date",
    prop:"date",
    slotName:"slotDate"
},
{
    label:"Name",
    prop:"name"
},
{
    label:"Address",
    prop:"address"
}
]);

var tableData = reactive<anyObj[]>([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'John',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Morgan',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
tableData[0].name = "12221";




var sizeChange = (value: number)=>{
    console.log('sizeChange',value);
};

var currentChange = (value: number)=>{
    console.log('currentChange',value);
};

var tableChange = (value: number)=>{
    console.log('tableChange',value);
};

var pagination = reactive<TablePagination>({
            // currentPage: 1,
            // pageSize: 10,
            // total: 0,
            // layout: "sizes, prev, pager, next, jumper, ->, total, slot",
            // pageSizes: [10, 50, 100, 200],
            //page-size 改变时触发
            onTableSizeChange:sizeChange,
            //current-page 改变时触发
            onTableCurrentChange:currentChange,
            //current-page 或 page-size 更改时触发
            onTableChange:tableChange
          })



var add = function(){
    alert("新增")
}
var buttons = reactive([
    {
        tipName:"12312",
        iconName:"fa fa-comment-o",
        name:"新增",
        onClick:add
    }
])

</script>
